<template>
	<view class="lottery-bg">
		<u-navbar placeholder leftIconColor="#ffffff" bgColor="transparent" :autoBack="true"></u-navbar>

		<view class="lottery-box pad-top-20">
			<image class="image1" src="../../static/icon/1.png" mode=""></image>
			<image class="image2" src="../../static/icon/2.png" mode=""></image>
			<image class="image3" src="../../static/icon/3.png" mode=""></image>
			<image class="image4" src="../../static/icon/4.png" mode=""></image>
			<image @click="hanldeLog" class="image8" src="../../static/icon/8.png" mode=""></image>
			<image @click="hanldeRule" class="image9" src="../../static/icon/9.png" mode=""></image>
			<image class="image10" src="../../static/icon/10.png" mode=""></image>
			<!-- <view class="lottery-title font-40 color-white"></view> -->
			<view class="lottery">
				<!-- <view class="total color-white font-26">当前累计参与 <text class="color-theme">1105</text> 次</view> -->
				<view class="prize-box">
					<view class="tongs" :class="isOpen ? 'open':''">
						<image class="image" src="../../static/icon/14.png"></image>
						<image class="left" src="../../static/icon/16.png" mode=""></image>
						<image class="right" src="../../static/icon/17.png" mode=""></image>
					</view>
					<!-- <image src="../../static/icon/15.png" class="prize-image"></image> -->

				</view>
				<view class="pad-30 notice-box">
					<u-notice-bar icon="" color="#FFFFFF" bgColor="transparent" direction="column"
						:text="luckyLog"></u-notice-bar>
				</view>

			</view>
		</view>

		<view class="bottom">
			<view class="open-box pad-left-right-14">
				<view class="open-bg">
					<!-- <image class="left-image" src="../../static/icon/11.png"></image> -->
					<view class="button-box">
						<template v-if="join_now">

							<!-- 活动进行中 -->
							<view @click="hanldeOpenLoery" class="button-text"
								v-if="newTime >= info.begin_at && newTime < info.end_at">
								<text>点击抽奖</text>
							</view>

						</template>
						<template v-else>
							<!-- 活动未开始 -->
							<view class="countDown centerXY" v-if="newTime < info.begin_at">
								<u-count-down @finish="hanldeFinish" :time="countDown(info.begin_at,newTime)"
									format="HH:mm:ss"></u-count-down>
								<text class="color-white font-28 mar-left-10">后开始</text>
							</view>
							<view v-else class="button-text">
								<text class="mar-left-5 font-24">{{msg}}</text>
							</view>
						</template>

						<image src="../../static/icon/12.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="num">
				<view class="xhcp">
					<view class="font-24">免费抽奖次数<text class="mar-left-10 color-grey">(优先消耗)</text></view>
					<view class="numTime color-theme font-40 font-w-700">{{luckyChance}}</view>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="line"></view>

			<!-- 奖品槽 -->
			<view class="list pad-36">
				<view class="font-24 text-center">拥有以下藏品可获得相应的抽奖次数 <text class="color-theme">(已寄售除外)</text></view>

				<view class="mar-top-30 centerY gap30 rowW">
					<view @click="hanldeTab(index)" v-for="(item,index) in material" :key="index">
						<view :class="tabInx == index ? 'tabOn' : ''" v-if="item.material_config.goods"
							class="tab-list">{{item.name}}</view>
					</view>
				</view>

				<view class="list-box mar-top-36">
					<view class="item mar-bottom-20" v-for="(item,index) in goodsList"
						@click="hanldeOpenMaterial(item,index)">
						<view class="image-box centerY betweenX flex-w">
							<view class="centerY flex-w">
								<view class="list-right centerXY radius12">
									<u-icon v-if="item.isShow" color="#42b983" size="30"
										name="checkmark-circle-fill"></u-icon>
								</view>
								<view class="mar-left-20 color-grey font-28">请添加抽奖材料</view>
							</view>
							<view class="right">添加材料</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 选择材料弹框 -->
		<u-popup mode="bottom" round="12" bgColor="#36313B" :show="isMaterial" closeable @close="handelClose">

			<view class="pad-32 mar-top-50">
				<view class="centerY betweenX">
					<view class="color-white font-w-500">一共需要<text v-if="goodsList[slutId]"
							class="hold-number">{{goodsList[slutId].num}}</text>个材料
					</view>
				</view>
				<view class="popup-box">
					<u-collapse accordion :border="false">
						<u-collapse-item v-for="(item,index) in singleMaterial.itemArray">
							<view slot="title">
								<view class="font-30 font-w-600 color-white">{{item.name}}</view>
								<view class="font-26 mar-top-20 color-white" v-if="item.num>0">
									<text>至少需要</text>
									<text class="hold-number">{{item.num}}</text>个
								</view>
								<view class="font-26 numberWei mar-top-20" v-else></view>
							</view>
							<view slot="value" class="font-28 color-white">选择</view>
							<view class="u-collapse-content">
								<view class="goods-list">
									<view class="rowW gap30">
										<view v-for="(info,goodsIndex) in item.goods"
											class="list centerXY radius16 bg-theme1"
											@click="hanldeSelectGoods(index,goodsIndex,info.id,info)">
											<view class="font-28 color-white">{{info.goods_info.name}}</view>
											<view class="color-grey font-24">#{{info.code}}</view>
											<image v-if="choseGoodsIdArr[tabInx].goods[slutId].indexOf(info.id) >-1"
												class="checked-icon" src="../../static/icon/checked-icon.png"></image>
										</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<view class="pad-left-right-30 pad-top-bottom-6">
				<view @click="hanldeConfirmSelection" class="button-style flex-w">确认选择</view>
			</view>
		</u-popup>

		<!-- 结果弹窗 -->
		<u-popup mode="center" bgColor="transparent" round="12" :show="isGifts">
			<view class="text-right mar-bottom-20">
				<image @click="isGifts = false" class="close" src="../../static/icon/close.png"></image>
			</view>

			<view class="gifts-box">
				<view class="text-center centerXY">
					<image class="title-img" src="../../static/image/19.png"></image>
					<text class="font-30" v-if="isLucky">惊喜连连，再试一次</text>
					<text class="font-30" v-else>就差一点，再试一次</text>
					<image class="title-img" src="../../static/image/20.png"></image>
				</view>
				<view class="gifts-list">
					<view v-if="isLucky" class="list mar-bottom-20 centerY betweenX" v-for="item in gifts.goods">
						<image class="gifts-image" :src="item.goods_info.cover" mode="aspectFill"></image>
						<view class="mar-left-15 font-28 color-theme">{{item.goods_info.name}}</view>
					</view>

					<view v-if="!isLucky" class="centerXY columnY mar-top-120">
						<image class="cry" src="../../static/image/cry.png"></image>
						<view class="mar-top-30 font-28 color-grey">很遗憾，您未中奖</view>
					</view>
				</view>
				<view class="centerX">
					<view @click="isGifts = false" class="gifts-button">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 消耗的次数 -->
		<u-popup mode="center" bgColor="transparent" round="12" :show="isConsume">
			<view class="text-right mar-bottom-20">
				<image @click="isConsume = false" class="close" src="../../static/icon/close.png"></image>
			</view>

			<view class="gifts-box">
				<view class="text-center centerXY">
					<image class="title-img" src="../../static/image/19.png"></image>
					<text>提示</text>
					<image class="title-img" src="../../static/image/20.png"></image>
				</view>
				<view class="mar-top-40 text-center font-28 color-grey">此轮抽奖需要消耗藏品明细如下，请确认~</view>
				<view class="consume-list">
					<view class="list mar-bottom-20 centerY" v-for="item in consume">
						<view class="mar-left-15 font-28  flex-w betweenX">
							<view class="flex-w multi1">{{item.goods_info.name}}</view>
							<view class="mar-left-20">#{{item.code}}</view>
						</view>
					</view>
				</view>
				<view class="centerXY">
					<view class="consume-cancel" @click="isConsume = false">取消</view>
					<view @click="haldeOpenButton" class="consume-define mar-left-32">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 使用免费 -->
		<u-popup mode="center" bgColor="transparent" round="12" :show="isFree">
			<view class="text-right mar-bottom-20">
				<image @click="isFree = false" class="close" src="../../static/icon/close.png"></image>
			</view>
			<view class="free-box">
				<view class="text-center centerXY">
					<image class="title-img" src="../../static/image/19.png"></image>
					<text>提示</text>
					<image class="title-img" src="../../static/image/20.png"></image>
				</view>

				<view class="content text-center color-grey pad-30 mar-top-bottom-56">
					此轮抽奖需要消耗抽奖机会
				</view>
				<view class="centerXY">
					<view class="consume-cancel" @click="isFree = false">取消</view>
					<view @click="haldeOpenButton('free')" class="consume-define mar-left-32">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		activityChannelInfo,
		myGoodsCodeList,
		activityCovert
	} from '@/config/api.js'

	export default {
		data() {
			return {
				// 免费抽奖弹窗
				isFree: false,
				// 抽奖动画
				isOpen: false,
				// 详情
				info: {
					material_config: {
						goods: []
					}
				},
				// 当前时间
				newTime: parseInt(new Date().getTime() / 1000),
				// 免费抽奖次数剩余
				luckyChance: 0,
				// 最近中奖记录
				luckyLog: [],
				// 抽奖弹窗
				isMaterial: false,
				// 抽奖材料默认
				material: {},
				// 材料弹窗数据
				goodsList: [],
				// 单个材料合集
				singleMaterial: {},
				// 选择的槽下标
				slutId: 0,
				// 选择过后的数据
				initArray: [],
				// 中奖奖品数据
				gifts: {},
				// 是否中奖
				isLucky: false,
				// 中奖弹窗
				isGifts: false,
				// 提示 消耗数组
				consume: [],
				// 消耗数组弹窗
				isConsume: false,
				// 默认材料1
				tabInx: 0,
				// 提交的数据
				choseGoodsIdArr: {},
				join_now: false,
				msg: '活动已结束'
			}
		},
		onLoad(options) {
			this.drawId = options.id;
			this.getDrawDetail();
		},
		methods: {
			// 抽奖记录
			hanldeLog() {
				uni.navigateTo({
					url: '/pages/my/activityRecord?id=' + this.drawId + '&type=' + 'draw'
				})
			},
			// 确定材料选择
			hanldeConfirmSelection() {
				let item = this.goodsList[this.slutId].itemArray;
				let thatGoodsIdarr = this.choseGoodsIdArr[this.tabInx].goods[this.slutId];
				for (let i = 0; i < item.length; i++) {
					if (this.initArray[this.slutId].goods[i].length >= item[i].num) {
						if ((item.length - 1) == i) {
							if (thatGoodsIdarr.length < this.goodsList[this.slutId].num) {
								uni.$u.toast(`所需材料不足`)
								return
							}
						}
					} else {
						uni.$u.toast(`至少选择${item[i].num}${item[i].name}`)
						return
					}
				}

				this.goodsList[this.slutId].isShow = true;

				// 添加成功关闭弹窗
				this.isMaterial = false;
			},
			// 点击选择材料
			hanldeSelectGoods(index, goodsIndex, codeId, item) {

				let thatGoodsIdarr = this.choseGoodsIdArr[this.tabInx].goods[this.slutId];
				let choseIdx = thatGoodsIdarr.indexOf(codeId)
				let inx = this.initArray[this.slutId].goods[index].findIndex(i => i == codeId)

				// 消耗材料下标
				let goodsIndexs = this.consume.findIndex(i => i.id == codeId)

				if (choseIdx > -1) {
					thatGoodsIdarr.splice(choseIdx, 1)
					this.initArray[this.slutId].goods[index].splice(inx, 1);
					// 删除被消耗的提示
					this.consume.splice(goodsIndexs, 1);
				} else {
					if (thatGoodsIdarr.length >= this.singleMaterial.num) {
						uni.$u.toast(`所需材料不能超过${this.singleMaterial.num}`)
						return
					}
					this.initArray[this.slutId].goods[index].push(codeId)

					// 增加被消耗的提示
					this.consume.push(item);

					thatGoodsIdarr.push(codeId);
				}

				this.choseGoodsIdArr[this.tabInx].goods[this.slutId] = thatGoodsIdarr;

				// 更新试图
				this.$forceUpdate()
			},
			// 切换材料
			hanldeTab(index) {
				this.tabInx = index;
				this.slutId = 0;
				this.consume = [];
				this.materialInfo = this.material[index];
				if (this.material[index].material_config.goods) {
					this.goodsList = this.material[index].material_config.goods;
				} else {
					this.goodsList = []
				}
				this.getInitData();
				this.goodsList.forEach(item => {
					item.isShow = false;
				})
			},
			// 获取藏品
			getMaterial(arrayId, inx) {
				// 获取材料
				myGoodsCodeList({
					goods_ids: arrayId,
					lock_scene: 'normal'
				}).then(res => {
					this.goodsList[inx].itemArray.forEach(item => {
						item.goods = [];
						res.data.lists.forEach((info, index) => {
							if (item.id == info.goods_id) {
								item.goods.push(info)
							}
						});
					})

					// 更新试图
					this.$forceUpdate()
				})
			},
			// 打开抽奖选材料
			hanldeOpenMaterial(item, inx) {
				this.isMaterial = true;
				this.slutId = inx;
				// 格式化数据
				let arrayId = []
				let goodsArray = [];
				for (let key in item.goods_ids) {
					arrayId.push(key);
					goodsArray.push({
						id: key,
						name: item.multi_goods_info[key].name,
						num: item.goods_ids[key],
					});
				}
				// 提出选中的材料
				item.itemArray = goodsArray;
				this.singleMaterial = item;
				this.getMaterial(arrayId, inx);
			},
			// 更新当前时间
			hanldeFinish() {
				this.newTime = parseInt(new Date().getTime() / 1000);
				this.getDrawDetail();
			},
			// 倒计时计算 time - time1 *1000
			countDown(time, time1) {
				return (time - time1) * 1000;
			},
			// 关闭弹窗
			handelClose() {
				this.isMaterial = false;
			},
			// 获取抽奖详情
			getDrawDetail() {
				activityChannelInfo({
					id: this.drawId
				}).then(res => {
					let {
						info,
						material,
						rest_chance,
						chance_material,
						msg,
						join_now
					} = res.data

					this.msg = msg;
					this.join_now = join_now;
					this.info = info;
					this.luckyChance = rest_chance;

					// 免费抽奖提交
					this.chance_material = chance_material;

					//有合法方式
					if (material) {
						this.material = material;

						material.forEach((item, index) => {
							if (!item.material_config.goods) {
								material.splice(index, 1);
							}
						})

						// 默认方式1
						this.materialInfo = material[0];

						if (material.length > 0) {
							material[0].material_config.number = 0;

							if (material[0].material_config.goods) {
								this.goodsList = material[0].material_config.goods;
							}

							this.getInitData();
						}
					}
				})
			},
			// 初始化数据
			getInitData() {
				// 给后台的数据
				let initMar = {}
				for (let i in this.material) {
					let gArr = []
					for (let gg in this.material[i].material_config.goods) {
						gArr.push([])
					}

					initMar[i] = {
						goods: gArr
					};
				}

				this.choseGoodsIdArr = initMar;

				//  本地拆分数据
				let initArray = [];
				if (this.materialInfo.material_config.goods) {
					for (let i = 0; i < this.materialInfo.material_config.goods.length; i++) {
						let itemGoods = {}
						for (let gg in this.materialInfo.material_config.goods[i]) {
							itemGoods.goods = []
							for (let gg in this.materialInfo.material_config.goods[i].goods_ids) {
								itemGoods.goods.push([])
							}
						}
						initArray.push(itemGoods)
					}
				}


				this.initArray = initArray;
			},
			// 活动规则
			hanldeRule() {
				uni.setStorageSync('lottery', this.info.desc)
				uni.navigateTo({
					url: '/pages/activity/lotterRule'
				})
			},
			// 抽奖二次确认
			hanldeOpenLoery() {
				if (this.luckyChance > 0) {
					this.isFree = true;
					return
				}

				let num = 0;
				for (let i = 0; i < this.goodsList.length; i++) {
					if (this.goodsList[i].isShow) {
						num = i;
					} else {
						uni.$u.toast(`所需材料不足`)
						return
					}
				}

				// 全部材料选完
				if (num == this.goodsList.length - 1) {
					this.isConsume = true;
				} else {
					uni.$u.toast(`所需材料不足`)
				}
			},
			// 点击抽奖
			haldeOpenButton(type) {
				// 开启动画
				this.isOpen = true;
				// 关闭二次确认框
				this.isConsume = false;
				this.isFree = false;

				// 延迟接口
				setTimeout(() => {
					let data = {};

					if (type == 'free') {
						data = {
							material_id: this.chance_material.id,
							material: this.chance_material.material_config
						};
					} else {
						data = {
							material_id: this.materialInfo.id,
							material: this.choseGoodsIdArr[this.tabInx]
						}
					}

					activityCovert(data).then(res => {
						let {
							gifts,
							is_lucky
						} = res.data;

						this.gifts = gifts;
						this.isLucky = is_lucky
						this.isGifts = true;
						this.material = {};
						this.initArray = [];
						this.goodsList = [];
						this.getDrawDetail();
						this.consume = [];
						// 放回结果 延迟关闭动画
						setTimeout(() => {
							this.isOpen = false;
						}, 1500)
					}).catch(res => {
						setTimeout(() => {
							this.isOpen = false;
						}, 1500)
					})
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-list {
		font-size: 28rpx;
		background: linear-gradient(226deg, #f4f7fe, rgba(255, 255, 255, 0));
		border: 1px solid #ebebeb;
		padding: 8rpx 25rpx;
		border-radius: 8rpx;
	}

	.tabOn {
		background: $uni-bg-theme;
		color: white;
	}


	// 中奖弹窗
	.gifts-box,
	.free-box {
		width: 600rpx;
		height: 50vh;
		background: white;
		border-radius: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.gifts-image {
			display: block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}

		.consume-cancel {
			width: 230rpx;
			height: 80rpx;
			border: 2rpx solid $uni-bg-theme;
			text-align: center;
			line-height: 80rpx;
			border-radius: 70rpx;
			color: $uni-theme;
			box-sizing: border-box;
		}

		.consume-define {
			width: 230rpx;
			height: 80rpx;
			background: $uni-bg-theme;
			text-align: center;
			line-height: 80rpx;
			border-radius: 70rpx;
			color: white;
			box-sizing: border-box;
		}

		.title-img {
			width: 46rpx;
			height: 12rpx;
			margin: 0 32rpx;
		}

		.gifts-list {
			height: calc(50vh - 140rpx);
			overflow-y: scroll;
			margin: 20rpx 0;
		}

		.consume-list {
			height: calc(50vh - 320rpx);
			overflow-y: scroll;
			margin: 20rpx 0;
		}

		.gifts-button {
			width: 400rpx;
			height: 100rpx;
			background: $uni-bg-theme;
			text-align: center;
			line-height: 100rpx;
			border-radius: 70rpx;
			color: white;
		}

		.cry {
			width: 240rpx;
			height: 160rpx;
		}
	}


	.free-box {
		height: auto;
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}


	.popup-box {
		max-height: 75vh;
		overflow-y: scroll;
	}

	.numberWei {
		height: 36rpx;
	}

	.notice-box {
		width: 650rpx;

		/deep/ .u-notice__swiper__item {
			display: inline-block;
			text-align: center;
		}
	}

	.lottery-bg {
		width: 751rpx;
		height: 100vh;
		background: url('../../static/image/lottery.png')no-repeat;
		background-size: 100% auto;
		background-color: #ffe4e4;

		::v-deep .u-collapse {
			margin-top: 30rpx;

			.u-cell__body {
				background: linear-gradient(226deg, #f4f7fe, rgba(255, 255, 255, 0));
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				border: 1px solid #ebebeb;
				padding: 10rpx 20rpx;
			}

			.u-icon__icon--info {
				font-size: 20rpx !important;
			}

			.u-collapse-item__content__text {
				padding: 0 !important;
			}
		}

		.button-style {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
		}


		.goods-list {
			height: 600rpx;
			overflow: hidden;
			overflow-y: scroll;

			.list {
				width: calc(50% - 16rpx);
				height: 100rpx;
				position: relative;
				overflow: hidden;
				flex-direction: column;
				box-sizing: border-box;

				.checked-icon {
					position: absolute;
					display: block;
					width: 40rpx;
					height: 40rpx;
					right: 10rpx;
					top: 5rpx;
				}
			}
		}

		.bottom {
			transform: translateY(-160rpx);
			position: relative;
			z-index: 10;

			.num {
				width: 100%;
				height: 133px;
				background: url('../../static/image/bg3.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.xhcp {
					width: 660rpx;
					height: 180rpx;
					background-image: url('../../static/image/7.png');
					background-size: 640rpx 160rpx;
					background-position: 50%;
					background-color: #ffe4e4;
					background-repeat: no-repeat;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			.line {
				width: 100%;
				height: 30rpx;
				background-color: #fadddd;
			}

			.list {
				background-color: #ffe4e4;
			}

			.list-box {
				display: block;
				flex-wrap: wrap;

				.item {
					.image-box {
						border: 4rpx solid $uni-theme;
						width: 100%;
						padding: 20rpx;
						border-radius: 20rpx;
						overflow: hidden;
						box-sizing: border-box;

						.list-right {
							width: 120rpx;
							height: 120rpx;
							background: #e3dede;
						}

						.right {
							background: $uni-bg-theme;
							color: white;
							padding: 10rpx 25rpx;
							box-sizing: border-box;
							font-size: 28rpx;
							border-radius: 30rpx;
						}

						.image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}
			}

		}

		.open-box {
			background: url('../../static/icon/bg2.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 168rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.open-bg {
				width: 704rpx;
				height: 128rpx;
				// background: url('../../static/icon/bg4.png') no-repeat;
				background-size: 100% 100%;
				position: relative;

				.left-image {
					position: absolute;
					left: 38rpx;
					bottom: 30rpx;
					display: block;
					height: 148rpx;
					width: 168rpx;
				}

				.button-box {
					position: absolute;
					right: 50%;
					margin-right: -244rpx;
					bottom: 14rpx;
					width: 488rpx;
					height: 161rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}

					.button-text {
						position: absolute;
						width: 100%;
						height: 100%;
						text-align: center;
						z-index: 1;
						font-size: 40rpx;
						color: white;
						transition: .2s;
					}

					.countDown {
						position: absolute;
						width: 100%;
						height: 70%;
						text-align: center;
						z-index: 1;

						::v-deep .u-count-down__text {
							display: block;
							line-height: 40rpx;
							font-size: 28rpx;
							color: white;
						}
					}
				}

				.button-box:active {
					transform: scale(.8);
					transition: .2s;
				}
			}
		}


		.lottery-box {
			display: flex;
			justify-content: center;
			position: relative;

			.image1 {
				position: absolute;
				left: 0rpx;
				top: 52rpx;
				width: 96rpx;
				height: 308rpx;
			}

			.image2 {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 44rpx;
				height: 68rpx;
			}

			.image3 {
				position: absolute;
				right: 30rpx;
				top: 500rpx;
				width: 36rpx;
				height: 40rpx;
				z-index: 1;
			}

			.image4 {
				position: absolute;
				right: 10rpx;
				top: 600rpx;
				width: 94rpx;
				height: 116rpx;
				z-index: 10;
			}

			.image8 {
				position: absolute;
				right: 0rpx;
				top: 50rpx;
				width: 58rpx;
				height: 168rpx;
				z-index: 10;
			}

			.image9 {
				position: absolute;
				right: 0rpx;
				top: 250rpx;
				width: 58rpx;
				height: 168rpx;
				z-index: 10;
			}

			.image10 {
				position: absolute;
				left: 0rpx;
				top: 480rpx;
				width: 84rpx;
				height: 148rpx;
				z-index: 10;
			}

			.lottery-title {
				width: 314rpx;
				height: 124rpx;
				padding-top: 10rpx;
				letter-spacing: 10rpx;
				font-weight: 600;
				box-sizing: border-box;
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				top: -40rpx;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				padding-bottom: 60rpx;
				background: url('../../static/icon/5.png') no-repeat;
				background-size: 100% 100%;
				text-align: center;
				z-index: 10;
			}

			.lottery {
				width: 650rpx;
				height: 904rpx;
				// background: url('../../static/image/lottery.png')no-repeat;
				background-size: 100% 100%;
				position: relative;
				z-index: 9;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 68rpx;

				.total {
					letter-spacing: 4rpx;
				}

				.prize-box {
					width: 680rpx;
					height: 706rpx;
					background-image: url('../../static/image/bg1.png');
					background-size: 100% 100%;
					margin-top: 12rpx;
					overflow: hidden;
					position: relative;

					.open {
						animation-name: example;
						animation-duration: 3s;

						.left {
							transform: rotate(-45deg);

						}

						.right {
							transform: rotate(45deg);
						}
					}

					.tongs {
						width: 94px;
						height: 468rpx;
						position: absolute;
						left: 80rpx;
						top: -290rpx;
						z-index: 1;

						.image {
							display: block;
							width: 100%;
							height: 100%;
							z-index: 2;
						}

						.left {
							width: 30rpx;
							height: 44rpx;
							position: absolute;
							right: 10rpx;
							bottom: -24rpx;
							transform-origin: center top;

						}

						.right {
							width: 30rpx;
							height: 44rpx;
							position: absolute;
							left: 10rpx;
							bottom: -22rpx;
							transform-origin: center top;
						}
					}

					@keyframes example {

						10% {
							top: -290rpx;
							left: 340rpx;
						}

						40% {
							top: 10rpx;
							left: 340rpx;
						}

						60% {
							left: 340rpx;
							top: -290rpx;
						}

						100% {
							left: 80rpx;
						}
					}

					.prize-image {
						width: 100%;
						height: 128px;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 10;
					}
				}
			}
		}
	}
</style>